<template>
  <div>
    <el-collapse v-model="activeNames" accordion @change="handleChange">
      <el-collapse-item :name="collapse.name" v-for="collapse in collapseList">
        <template slot="title">
          <span class="pl-10"> {{collapse.title}}</span>
        </template>
        <div class="pd-10" style="overflow: scroll;max-height: 600px">
          <el-row>
            <el-col v-for="item in collapse.nodeList" style="margin-bottom:0px">
              <div class="material  flex-item  pd-10 " style="text-align: center">
                <div @dragstart="onDragStart($event,item)" draggable="true" @drag='onDraging' @dragend="OnDragEnd">
                  <task-node onselectstart="return false"

                             :style="{maxWidth:item.style.width+'px',height:item.style.height+'px'}"
                             :propsData="item.data"
                             style="margin: 0 auto"></task-node>
                </div>
                <p class=" mt-15">{{item.data.name}}</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import TaskNode from './lib/TaskNode'

  export default {
    name: 'NodeBox',
    components: {TaskNode},
    data () {
      return {
        activeNames: 'flowNode',
        collapseList: [{
          title: '流程节点',
          name: 'flowNode',
          nodeList: [{
            style: {
              width: 120,
              height: 60
            },
            data: {
              name: '开始',
              desc: '几秒',
              nodeType: 'start',
              className: 'start-node',

            },
          },
            {
              style: {
                width: 120,
                height: 60
              },
              data: {
                name: '结束',
                desc: 'desc',
                nodeType: 'end',
                className: 'end-node',
              },
              label: '结束'
            },
            {
              style: {
                width: 60,
                height: 70
              },
              data: {
                name: '并行',
                desc: '并行调用执行',
                nodeType: 'parallel',
                className: 'parallel-node',
                iconUrl: require('@/assets/node/parallel.png')
              },
              label: '接口'
            },
            {
              style: {
                width: 60,
                height: 70
              },
              data: {
                name: '分支合并',
                desc: '合并',
                nodeType: 'join',
                className: 'join-node',
                iconUrl: require('@/assets/node/join.png')
              },
              label: '接口'
            },
            {
              style: {
                width: 60,
                height: 70
              },
              data: {
                name: '判断',
                nodeType: 'judge',
                desc: '',
                className: 'judge-node',
                iconUrl: require('@/assets/node/judge.png')
              },
              label: '接口'
            },
            {
              style: {
                width: 260,
                height: 60
              },
              data: {
                nodeType: 'api',
                desc: 'desc',
                className: 'api-node',
                nodeData: {
                  keepOldOut: true,
                  retryTotal: 1
                },
                name: '数据源',
                desc: '第三方数据接口',
                iconUrl: require('@/assets/node/api.png')
              },
              label: '接口'
            },
          ],
        }]
      }
    }, methods: {
      onDragStart (event, data) {
        event.dataTransfer.setData('jsonData', JSON.stringify(data))
      },
      onDraging () {
        // console.log('拖拽中')
      },
      OnDragEnd () {
        console.log('拖拽完成')
      }
    }
  }
</script>

<style scoped>
  @import "../../../css/layout.css";

  .flex-item {
    height: 80px;
    box-sizing: border-box;
  }

  .material {
    text-align: center;
    float: left;
    width: 100%;
    height: 100%;
    transform: scale(0.9);
    box-sizing: border-box;
    border-radius: 5px;
    cursor: move;
  }

  .material .graph {
    border: 2px solid #5F95FF;
  }

  .round {
    height: 70%;
    width: 80%;
    margin: 0px auto;
    box-sizing: border-box;
    border-radius: 50%;
  }

  .rect {
    height: 70%;
    width: 80%;
    margin: 0px auto;
    box-sizing: border-box;
    border-radius: 5px;

  }

  .material:hover {
    background: rgba(193, 195, 196, 0.11);
  }

  .test {
    width: 200px;
    height: 200px;
    transform: scale(0.9);
    border: 1px solid #5F95FF;
  }

  .test .task-box .task-body .task-desc {
    margin-top: 0px;
  }
</style>
